<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebDAV文件上传</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .container {
            max-width: 800px;
            margin-top: 50px;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .progress {
            height: 25px;
            margin-top: 20px;
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .btn-upload {
            width: 100%;
        }
        .file-info {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        .status-message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            display: none;
        }
        .status-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            display: block;
        }
        .status-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            display: block;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0"><i class="fas fa-cloud-upload-alt"></i> WebDAV文件上传</h4>
            </div>
            <div class="card-body">
                <!-- WebDAV连接设置 -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="webdav_url"><i class="fas fa-link"></i> WebDAV地址</label>
                            <input type="text" class="form-control" id="webdav_url" v-model="webdavConfig.url" placeholder="https://example.com/remote.php/dav/files/username/">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="webdav_user"><i class="fas fa-user"></i> 用户名</label>
                            <input type="text" class="form-control" id="webdav_user" v-model="webdavConfig.username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="webdav_pass"><i class="fas fa-lock"></i> 密码</label>
                            <input type="password" class="form-control" id="webdav_pass" v-model="webdavConfig.password" placeholder="密码">
                        </div>
                    </div>
                </div>
                
                <!-- 文件选择 -->
                <div class="form-group">
                    <label for="fileUpload"><i class="fas fa-file"></i> 选择文件</label>
                    <input type="file" class="form-control-file" id="fileUpload" @change="handleFileSelect">
                    <div v-if="selectedFile" class="file-info">
                        <i class="fas fa-file-alt"></i> 已选择: {{ selectedFile.name }} ({{ formatFileSize(selectedFile.size) }})
                    </div>
                </div>
                
                <!-- 上传按钮 -->
                <button 
                    class="btn btn-primary btn-upload" 
                    @click="uploadFile" 
                    :disabled="!selectedFile || uploading"
                >
                    <span v-if="uploading" class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>
                    <i v-else class="fas fa-upload mr-2"></i>
                    {{ uploading ? '上传中...' : '开始上传' }}
                </button>
                
                <!-- 进度条 -->
                <div v-if="uploading" class="progress">
                    <div class="progress-bar progress-bar-striped bg-primary" :style="{ width: uploadProgress + '%' }" role="progressbar" :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100">
                        {{ uploadProgress }}%
                    </div>
                </div>
                
                <!-- 状态消息 -->
                <div :class="['status-message', statusClass]">
                    <i :class="statusIcon"></i> {{ statusMessage }}
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    webdavConfig: {
                        url: '',
                        username: '',
                        password: ''
                    },
                    selectedFile: null,
                    uploading: false,
                    uploadProgress: 0,
                    statusMessage: '',
                    statusClass: '',
                    statusIcon: ''
                };
            },
            methods: {
                handleFileSelect(event) {
                    if (event.target.files.length > 0) {
                        this.selectedFile = event.target.files[0];
                        this.resetStatus();
                    }
                },
                formatFileSize(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                },
                showStatus(message, isSuccess) {
                    this.statusMessage = message;
                    this.statusClass = isSuccess ? 'status-success' : 'status-error';
                    this.statusIcon = isSuccess ? 'fas fa-check-circle mr-2' : 'fas fa-exclamation-circle mr-2';
                },
                resetStatus() {
                    this.statusMessage = '';
                    this.statusClass = '';
                    this.statusIcon = '';
                },
                async uploadFile() {
                    if (!this.selectedFile) {
                        this.showStatus('请先选择一个文件', false);
                        return;
                    }

                    if (!this.webdavConfig.url || !this.webdavConfig.username || !this.webdavConfig.password) {
                        this.showStatus('请填写完整的WebDAV连接信息', false);
                        return;
                    }

                    this.uploading = true;
                    this.uploadProgress = 0;
                    this.resetStatus();

                    const formData = new FormData();
                    formData.append('file', this.selectedFile);
                    formData.append('webdav_url', this.webdavConfig.url);
                    formData.append('webdav_user', this.webdavConfig.username);
                    formData.append('webdav_pass', this.webdavConfig.password);

                    try {
                        await axios({
                            method: 'post',
                            url: '/api/webdav/upload',
                            data: formData,
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            },
                            onUploadProgress: (progressEvent) => {
                                if (progressEvent.total) {
                                    this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                                }
                            }
                        });

                        this.showStatus('文件上传成功！', true);
                        this.selectedFile = null;
                        document.getElementById('fileUpload').value = '';
                    } catch (error) {
                        console.error('上传失败:', error);
                        this.showStatus('上传失败: ' + (error.response?.data?.message || error.message), false);
                    } finally {
                        this.uploading = false;
                    }
                }
            }
        }).mount('#app');
    </script>
</body>
</html>